<template>
  <div class="ress-container">
    <van-nav-bar
      title="管理收获地址"
      left-arrow
      right-text="新建"
      @click-right="onClickRight"
      @click-left="onClickLeft"
    />
    <h3>我的收货地址</h3>
    <van-address-list
      v-model="chosenAddressId"
      :list="list"
      :disabled-list="disabledList"
      disabled-text="以下地址超出配送范围"
      default-tag-text="默认"
      @add="onAdd"
      @edit="onEdit"
    />
  </div>
</template>

<script>
import { ref } from "vue";
import { Toast } from "vant";
export default {
  name: "ress",
  setup() {
    const chosenAddressId = ref("1");
    const onClickLeft = () => history.back();
    const onClickRight = () => Toast("按钮");
    const list = [
      {
        id: "1",
        name: "小慕",
        tel: "18911023261",
        address:
          "北京市海淀区西三环北路 2号院 北京理工大学 国防科技园2号楼 10层 ",
        isDefault: true,
      },
      {
        id: "2",
        name: "李四",
        tel: "1310000000",
        address: "浙江省杭州市拱墅区莫干山路 50 号",
      },
    ];
    const disabledList = [
      {
        id: "3",
        name: "王五",
        tel: "1320000000",
        address: "浙江省杭州市滨江区江南大道 15 号",
      },
    ];

    const onAdd = () => Toast("新增地址");
    const onEdit = (item, index) => Toast("编辑地址:" + index);

    return {
      list,
      onAdd,
      onEdit,
      disabledList,
      chosenAddressId,
      onClickLeft,
      onClickRight,
    };
  },
};
</script>

<style lang="less" scoped>
.ress-container {
  margin-top: 20px;
  h3 {
    margin-left: 12px;
    text-align: left;
    color: #333333;
  }
  .van-address-list {
    padding-top: 0px;
  }
}
</style>